import React,{Component} from 'react'
import {Text, StyleSheet, View, Image, PixelRatio, TouchableOpacity} from 'react-native'
import NavigationUtil from '../../../navigator/NavigationUtil.js'
import MinaIcon from '../../../components/MinaIcon.js'

export default class MyOrderComponent extends Component {
  goToMyOrder(){
    NavigationUtil.goPage({
      navigation: this.props.navigation
    }, 'MyOrder')
  }
  render() {
    let mySelfNavs = [
      {
        icon: 'mine_icon_wait',
        text: '待领取',
      },
      {
        icon: 'mine_icon_recei',
        text: '已领取',
      },
      {
        icon: 'mine_icon_order',
        text: '我的订单',
      }
    ];
    let mySelfNav = <View style={styles.mySelfNav}>
      {mySelfNavs.map((item, index) => {
        return (
          <TouchableOpacity style={styles.navItem} key={index} onPress={() => {
              this.goToMyOrder();
            }}>
            <View style={styles.navItem}>
              <MinaIcon
                name={'MinaIcon|' + item.icon}
                size={26}
                style={{}}
              />
              <Text style={styles.navText}>{item.text}</Text>
            </View>
          </TouchableOpacity>
        )
      })}
    </View>
    return (
      mySelfNav
    )
  }
}

const styles = StyleSheet.create({
  mySelfNav: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingTop: 24,
    paddingBottom: 24,
    marginBottom: 20,
    backgroundColor: '#fff',
    shadowOffset: {width: 0, height: 0},
    shadowColor: '#FFF3F4',
    shadowOpacity: 0.5,
    shadowRadius: 3,
    elevation: 1
  },
  navItem: {
    flex: 1,
    alignItems: 'center',
  },
  navText: {
    color: '#282828',
    textAlign: 'center',
    fontSize: 12,
    marginTop: 8,

  },
})
